<template>
    <div class="mmv-anchor">
        <template v-for="item in list">
            <el-button icon="el-icon-s-flag"
                       :key="item.guid"
                       type="primary"
                       @click="item.el.scrollIntoView()"
                       plain>{{item.label}}</el-button>
        </template>
    </div>
</template>

<script>
export default {
    name: 'MmvAnchor',
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        const titles = document.body.querySelectorAll('.mmv-title-anchor') || [];
        this.list = Array.from(titles).map(title => {
            return {
                guid: title.getAttribute('id'),
                label: title.getAttribute('title'),
                el: title,
            }
        })
    },
}
</script>

<style lang="scss" scoped>
.mmv-anchor{
  margin-bottom: 20px;
}
.mmv-anchor-btn{
  user-select: none;
  cursor: pointer;
  &+&{
    margin-left: 10px;
  }
}
</style>
